<template>
	<view class="nav-bar" :style="{height:height+'px',backgroundColor}">
		<view class="iconView flex-center" @click="handleBackPrevious" id="iconView">
			<uni-icons size="28" :color="iconColor" v-if="leftIcon&&!leftImg" :type="leftIcon"></uni-icons>
			<view class="imgIcon" v-if="leftImg&&!leftIcon" :style="{backgroundImage: 'url(../../static/play/'+leftImg+'.png)'}"></view>
		</view>
		<view class="title flex-center" :style="{justifyContent,maxWidth:maxTitleWidth+'px'}">
			<view v-if="title">{{title}}</view>
			<slot name="title"></slot>
		</view>
		<view class="iconView flex-center">
			<uni-icons size="28" :color="iconColor" v-if="rightIcon&&!rightImg" :type="rightIcon"></uni-icons>
			<view class="imgIcon" v-if="rightImg&&!rightIcon" :style="{backgroundImage: 'url(../../static/play/'+rightImg+'.png)'}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			height:{
				type: String,
				default: "44"
			},
			backgroundColor:{
				type: String,
				default: "#ffffff"
			},
			iconColor:{
				type: String
			},
			leftImg:{
				type: String
			},
			rightImg:{
				type: String
			},
			rightImgScale:{
				type: String,
				default: "100%"
			},
			leftIcon:{
				type: String
			},
			rightIcon:{
				type: String
			},
			title:{
				type: String
			},
			justifyContent:{
				type: String,
				default: "flex-start"
			}
		},
		mounted(){
			let windowWidth = uni.getSystemInfoSync().windowWidth
			const query = uni.createSelectorQuery().in(this);
			query.select('.iconView').boundingClientRect(data=>{
				let iconViewWidth = data.width
				this.maxTitleWidth = windowWidth - 2*iconViewWidth - 10
				this.$forceUpdate()
			}).exec()
		},
		data() {
			return {
				maxTitleWidth: 0
			};
		}
	}
</script>

<style lang="scss">
.nav-bar{
	display: flex;
	width: 100%;
	justify-content: space-between;
	padding-top: var(--status-bar-height);
	box-sizing: content-box;
	position: fixed;
	top: 0;
	color: #FFFFFF;
	.iconView{
		height: 100%;
		width: 75rpx;
		&:last-child{
			padding-right: 20rpx;
		}
		.imgIcon{
			height: 60%;
			width: 60%;
			background-repeat: no-repeat;
			background-size: contain;
			transform: translateY(8%);
		}
	}
	.title{
		flex: 1;
		font-size: 16px;
		height: 100%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
}
</style>
